<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./vue.js"></script>
  <script src="./vue-router.js"></script>
</head>
<style>
  ul,
  li,
  h1 {
    padding: 0;
    margin: 0;
    list-style: none
  }

  #app {
    width: 100%;
    display: flex;
    flex-direction: row;
  }

  ul {
    width: 200px;
    flex-direction: column;
    color: #fff;
  }

  li {
    flex: 1;
    background: #000;
    margin: 5px auto;
    text-align: center;
    line-height: 30px;
  }

  .about-detail {
    flex: 1;
    margin-left: 30px;
  }

  .about-detail h1 {
    font-size: 24px;
    color: blue;
  }

  .contact-detail {
    flex: 1;
    margin-left: 30px;
  }

  .contact-detail h1 {
    font-size: 24px;
    color: blue;
  }
</style>

<body>
  <div id="app">
    <ul>
      <router-link to="/about" tag="li">关于公司</router-link>
      <router-link to="/contact" tag="li">联系我们</router-link>
    </ul>
    <router-view></router-view>
  </div>


  <!-- 定义about模板 -->
  <template id="aboutTmp">
    <div class="about-detail">
      <h1>广州腾科科技有限公司</h1>
      <!-- // 需要从父组件到子组件地址 -->
      <router-link to="/about/detail" tag="span">公司简介</router-link>
      <router-link to="/about/phone" tag="span">公司治理</router-link>
      <!-- 不要忘了把子组件显示出来，定义一个占位符 -->
      <router-view></router-view>
    </div>
  </template>

  <!-- 定义contact模板 -->
  <template id="contactTmp">
    <div class="contact-detail">
      <h1>广州腾科科技有限公司</h1>
      <router-link to="/contact/phone">联系电话</router-link>
      <router-view></router-view>
    </div>
  </template>

  <script>
    // 定义about组件的模板对象
    let about = {
      template: "#aboutTmp"
    }
    // 定义contact组件的模板对象
    let contact = {
      template: "#contactTmp"
    }

    // 定义子路由的组件模板对象
    let detail = {
      template: "<p>腾科是全球领先... 公司</p>"
    }
    let governance = {
      template: "<p>公司坚持以客户为中心、以奋斗者为本... ...</p>"
    }
    let phone = {
      template: "<h3>12345678901</h3>"
    }

    // 创建路由对象,配置路由的匹配规则
    var router = new VueRouter({
      routes: [{
        path: "/",
        redirect: "/about" //重定向路由
      }, {
        path: "/about",
        component: about,
        children: [{
            path: "detail",
            component: detail
          },
          {
            path: "governance",
            component: governance
          }
        ]
      }, {
        path: "/contact",
        component: contact,
        children: [{
          path: "phone",
          component: phone
        }]
      }]
    })

    var vm = new Vue({
      el: "#app",
      router // 挂载路由
    })
  </script>
</body>

</html>